<template>
  <div>
    <video :src="videoSrc" :width="videoWidth" :height="videoHeight" autoplay controls></video>
    <button @click="uploadVideo">上传视频</button>
    <div v-if="uploadProgress > 0">
      上传进度：{{ uploadProgress }}%
    </div>
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      videoSrc: '',
      videoWidth: 0,
      videoHeight: 0,
      uploadProgress: 0
    };
  },
  methods: {
    uploadVideo() {
      uni.chooseVideo({
        success: (res) => {
          this.videoSrc = res.tempFilePath;
          this.getVideoInfo();
          this.$emit('upload', this.videoSrc);
        },
        fail: (err) => {
          console.error('视频选择失败:', err.errMsg);
        }
      });
    },
    getVideoInfo() {
      const videoContext = uni.createVideoContext(this.$refs.myVideo);
      videoContext.getVideoInfo({
        success: (res) => {
          this.videoWidth = res.width;
          this.videoHeight = res.height;
        },
        fail: (err) => {
          console.error('获取视频信息失败:', err.errMsg);
        }
      });
    }
  }
};
</script>
